﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="jQuery Toggle Button, Toggle Button, Button" /> 
    <meta name="description" content="The jqxToggleButton represents a button widget that switches its checked state after a click." />
    <title id='Description'>The jqxToggleButton represents a button widget that switches its checked state after a click.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = '';

                // Create a jqxToggleButton widget.
                $("#jqxButton").jqxToggleButton({ width: '200', height: '30', toggled: true, theme: theme });
                $("#jqxDisabledButton").jqxToggleButton({ width: '200', height: '30', disabled: true, theme: theme });

                $("#jqxButton").bind('click', function () {
                    var toggled = $("#jqxButton").jqxToggleButton('toggled');
                    if (toggled) {
                        $("#jqxButton")[0].value = 'Toggled On';
                    }
                    else $("#jqxButton")[0].value = 'Toggled Off';
                });
            });
        </script>
        <div style='width:200px;' id='jqxWidget'>
            <div>
                <input style='margin-left: 25px;' type="button" value="Toggled On" id='jqxButton' />
            </div>
              <div>
                <input style='margin-left: 25px; margin-top: 10px;' type="button" value="Disabled" id='jqxDisabledButton' />
            </div>
        </div>
    </div>
</body>
</html>
